<template>
  <div id="listLibrary">
    <div class="table">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>BeijiRonin</span>
          <el-button
            style="float: right; margin-right: 10%"
            type="text"
            @click="load()"
            >刷新</el-button
          >
        </div>
        <el-table
          :data="datas"
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column prop="id" label="索引"> </el-table-column>
          <el-table-column prop="libraryName" label="名称"> </el-table-column>
          <el-table-column prop="location" label="地址"> </el-table-column>
          <el-table-column prop="message" label="附加信息" width="200px">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="updateTime" label="最近更新时间">
          </el-table-column>
          <!-- <el-table-column label="图片">
            <template slot-scope="scope">
              <img
                :src="
                  'https://api.yxing.site/messy_json/img?path=' + scope.row.img
                "
                alt=""
                style="width: 100%"
              />
            </template>
          </el-table-column> -->
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="delete_opera(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <el-card class="box-card" shadow="hover" style="margin-top: 50px">
      <div slot="header" class="clearfix">
        <span>发布</span>
      </div>
      <div class="form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item label="图书馆名" prop="libraryName">
            <el-input v-model="ruleForm.libraryName"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="location">
            <el-input v-model="ruleForm.location"></el-input>
          </el-form-item>
          <el-form-item label="附加信息" prop="message">
            <el-input v-model="ruleForm.message"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">
              <i class="el-icon-upload"></i>
              发布</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "listLibrary",
  data() {
    return {
      datas: [],
      dialogImageUrl: "",
      loading: true,
      dialogVisible: false,
      ruleForm: {
        libraryName: "",
        location: "",
        message: "",
        img: "",
      },
      rules: {
        libraryName: [
          { required: true, message: "请输入公告内容", trigger: "change" },
        ],
        location: [
          { required: true, message: "请输入地址", trigger: "change" },
        ],
        message: [
          { required: true, message: "请输入描述信息", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post(`http://localhost:4578/library_json/save`, {
              libraryItem: JSON.stringify(this.ruleForm),
            })
            .then(() => {
              this.$refs["ruleForm"].resetFields();
              this.load();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl = URL.createObjectURL(file.raw);
    //   this.ruleForm.img = res;
    // },
    load() {
      this.loading = true;
      this.datas = [];
      this.axios
        .post(`http://localhost:4578/all_json/libraryList`, {})
        .then((ret) => {
          this.datas = ret.data;
          this.loading = false;
        });
    },
    delete_opera(item) {
      this.axios
        .post(`http://localhost:4578/library_json/delete`, {
          libraryItem: JSON.stringify(item),
        })
        .then(() => {
          this.load();
        });
    },
    /**
     * 预览
     */
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisible = true;
    // },
    /**
     * 限制上传
     */
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
  },
  mounted() {
    this.load();
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>